<template>
	<view class="list">
		<view class="list-item" v-for="(item,index) in tabsData" :key="index">
			<view class="cell">
				<view class="">抬头类型：个人/非企业单位</view>
				<view class="price">50.00元</view>
			</view>
			<view class="cell">
				<view class="">发票抬头：解景青</view>
				<view class="price"></view>
			</view>
			<view class="cell">
				<view class="">发票项目：通信服务费</view>
				<view class="submit" @click="handleShow(index)">开具发票</view>
			</view>
		</view>


		<u-popup :show="show"  @open="open" mode="center">
			<view class="popup">
				<view class="title">
					<view class="">发票开具成功后不可撤销</view>
					<view class="" style="margin-top: 4rpx;">请您仔细核对开票信息</view>
				</view>
				<view class="content">
					<view class="cell">
						<view class="">发票项目：</view>
						<view class="">通信服务费</view>
					</view>
					<view class="cell">
						<view class="">发票抬头：</view>
						<view class="">北京联和利泰科技股份有限公司</view>
					</view>
					<view class="cell">
						<view class="">发票税号：</view>
						<view class="">911101087426483758</view>
					</view>
					<view class="cell">
						<view class="">联系地址：</view>
						<view class=""></view>
					</view>
					<view class="cell">
						<view class="">联系电话：</view>
						<view class=""></view>
					</view>
					<view class="cell">
						<view class="">开户银行：</view>
						<view class=""></view>
					</view>
					<view class="cell">
						<view class="">银行账号：</view>
						<view class=""></view>
					</view>
					<view class="cell">
						<view class="">接收邮箱：</view>
						<view class="">xiejq@litsoft.com.cn</view>
					</view>
					<view class="cell">
						<view class="">发票金额：</view>
						<view class="" style="color: red;">234.56元</view>
					</view>
					<view class="button">
						<view class="cancel" @click="show = false">返回修改</view>
						<view class="submit" @click="show = false">确认开票</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		name: 'InvoiceTabs2',
		props: {
			tabsData: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				show: false,
				showData:[]
			}
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			handleShow(index) {
				this.show = true
				this.showData = []
			}
		},
		created() {

		}
	}
</script>

<style lang="scss" scoped>
	.popup{
		.title{
			background-color: red;
			color:white;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 10rpx 0;
			font-weight: bold;
		}
		.content{
			width: 600rpx;
			.cell{
				padding: 0 20rpx;
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				margin-top: 20rpx;
			}
			.button{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
				.submit,.cancel{
					padding: 8rpx 20rpx;
					background-color: red;
					color: white;
					border-radius: 8rpx;
				}
				.cancel{
					margin-right: 40rpx;
				}
			}
		}
	}
	.list {
		.list-item {
			margin-top: 30rpx;
			padding: 20px;
			box-shadow: 0 0 4px #cccccc;

			.cell {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				.price {
					color: red;
					font-weight: bold;
				}

				.submit {
					color: white;
					background-color: red;
					padding: 6rpx 20rpx;
					font-size: 28rpx;
					border-radius: 8rpx;
				}
			}
		}
	}
</style>
